<template>
	<view class="shoplistBox">
		<view class="top">
			<view class="classBox">
				<view class="classitem" :style="'width:'+widthVal">
					<view :class="activeindex == index ? 'item active':'item'" v-for="(item,index) in classList" :key='index' @click="changeclass(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="cinditon bg-white">
				<view :class="cinditonindex == index ? 'item active':'item'" v-for="(item,index) in screenlist" @click="changecinditon(item,index)"
				 :key="index">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="nearbyBox" v-if="shoplist.length>0">
			<view class="nearbyItem"   v-for="(item,index) in shoplist" :key="index">
				<image :src="item.logo === null || item.logo === '' ? '/static/images/shop_placeholder.png' :carHost+item.logo" mode="aspectFill"></image>
				<view class="shopInfo" @click="getoInfo(item)">
					<view class="shoptitle">{{item.title}}</view>
					<view class="xj">
						<view class="xjbox">
							<!-- <image :src="'/static/images/xing.png'" mode="widthFix" v-for="(i,idx) in 5" :key="idx"></image> -->
							<Star  :score="xjfommater(item.xj)"/>
							<!-- iconshoucang-weixuanzhong -->
						</view>
					</view>
					<view class="address">
						<view class="u-line-1 address__text">{{item.address}}</view>
						<view>{{item.distance/1000}}km</view>
					</view>
				</view>
			</view>
		</view>
	<view class="nearbyItem text-center" v-else>
		<view class="iconfontPT iconzanwushuju1"></view>
		<text class="noColor ">暂无门店</text>
	</view>
	</view>
</template>

<script>
	import {
		classList,
		shoplist
	} from "../../apis/shop/api.js";
	import Star from '../components/public/star.vue';
	export default {
		data() {
			return {
				params: {
					screen: "zh",
					longitude: "",
					latitude: "",
					class_id: "",
					search: ""
				},
				classId: 0,
				searchVal: '',
				shoplist: [],
				classList: [],
				widthVal: "",
				activeindex: 0,
				cinditonindex: 0,
				screenlist: [{
						name: "综合",
						val: "zh"
					},
					{
						name: "距离",
						val: "zh"
					},
					{
						name: "星级",
						val: "xj"
					},
					// {
					// 	name:"销量",
					// 	val:"xl"
					// }
				]
			}


		},
		computed:{
			carHost(){
				return this.$baseHost.car
			},
			xjfommater(xj) {
				return (xj) => {
					return xj== null ? 5 : xj.toFixed(1);
				};
			}
		},
		components:{
			Star,
		},
		onLoad(option) {
			if (option.serach) this.params.search = option.serach
			this.activeindex=option.index
			let that = this
			uni.getStorage({
				key: "location",
				success: function(e) {
					console.log(e)
					that.params.latitude = e.data.latitude;
					that.params.longitude = e.data.longitude;
					that.params.class_id = option.classId
					that.getList()
				}
			})
			classList().then(res => {
				that.classList = res.data;
				that.widthVal = that.classList.length * 132 + 'rpx'
			})

		},
		methods: {
			changecinditon(item, index) {
				this.cinditonindex = index;
				this.params.screen = item.val;
				this.getList()
			},
			changeclass(item, index) {
				this.activeindex = index;
				this.params.class_id = item.id;
				this.getList()
			},
			getList() {
				let that = this
				shoplist(that.params).then(res => {
					if (res.code == 200) {
						that.shoplist = res.data.shop_list
					}
				})
			},
			getoInfo(item) {
				uni.navigateTo({
					url: '/pages/shop/shopinfo?store_id=' + item.id + '&latitude=' + this.params.latitude + '&longitude=' + this.params
						.longitude,
				})
			}
		}
	}
</script>

<style lang="less">
	.top {
		background-color: #E41805;
		border-bottom: 1rpx solid #efefef;
	}
    .iconfontPT {
		font-family: "iconfontPT" !important;
		font-size: 30px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #999999;
	}
	.noColor{
		color: #999999;
	}	
	.classBox {
		width: 100%;
		overflow: auto;
		padding: 50rpx 0 10rpx 0;

		.classitem {
			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			.item {
				width: 130rpx;
				float: left;
				text-align: center;
				color: #fff;
				font-size: 26rpx;

				&.active {
					font-size: 34rpx;
					font-weight: bold;
					line-height: 25rpx;
				}
			}
		}

	}

	.cinditon {
		display: flex;
		padding: 40rpx;
		border: 1rpx solid;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		border-color: #ffffff;

		.item {
			flex: 1;
			color: #333333;
			text-align: center;

			&.active {
				color: #E41805;
			}
		}
	}

	.nearbyBox {
		padding-bottom: 100rpx;
		padding: 40rpx;

		.nearbyItem {
			margin-top: 48rpx;

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			image {
				width: 144rpx;
				height: 144rpx;
				float: left;
			}

			.shopInfo {
				float: left;
				margin-left: 30rpx;
				width: calc(~"100% - 174rpx");

				.shoptitle {
					color: #1A1A1A;
					font-size: 32rpx;
				}

				.xj {
					margin: 18rpx 0;
					width: 100%;

					&::after {
						content: "";
						display: block;
						height: 0;
						overflow: hidden;
						clear: both;
					}

					.xjbox {
						float: left;

						&::after {
							content: "";
							display: block;
							height: 0;
							overflow: hidden;
							clear: both;
						}

						image {
							width: 24rpx;
							height: 24rpx;
							float: left;
							margin-right: 5rpx;

						}
					}

					text {
						float: right;
						font-size: 24rpx;
						color: #666;
					}
				}

				.address {
					font-size: 24rpx;
					color: #666;
					display: flex;
					justify-content: space-between;
					&__text{
						padding-right: 30rpx;
					}
				}
			}
		}
	}
</style>
